<template>
	<view class="m-position">
		<view class="item" v-for="(item, index) in list" :key="index" @click="onClick(item)">
			<view class="company-cont space-between">
				<view class="flex">
           <image :src="$mConfig.imageUrl + '/image/shop-logo.png'" class="logo"></image>
					<view class="company-name">
            <view class="title-name"> {{ item.companyName }}</view>
            <view>民营   300-10000人   家具  家...</view>
          </view>
          </view>
				<image :src="$mConfig.imageUrl + '/image/icon-arrow.png'" class="right-arrow"></image>
			</view>
      <view class="class-cont">
        <text>高新技术企业</text>
        <text>专利申请优质企业</text>
        <text>创新中小企业</text>
      </view>
      <view class="post-box ">
        <view class="post-item" v-for="item in 3" :key="item">
          <view class="space-between ">
            <view class="name">招聘一线普工操作工</view>
            <text class="right">6-8k </text>
          </view>
          <view class="descr">
            <text>太原市</text>
            <text>小店区</text>
            <text>范岗镇</text>
            <text class="skill">经验不限</text>
            <text class="skill">学历不限</text>
          </view>
        </view>
      </view>
      <view class="btn">查看更多招聘信息</view>
		</view>
	</view>
</template>

<script>
import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
import { formatDate } from '@/common/date';
export default {
	name: 'company-list',
	props: {
		list: Array
	},
	components: {
		mEmptyData
	},
	data() {
		return {
			no_order_1: this.$mAssetsPath.no_order_1
		};
	},

	methods: {
		onClick(item) {
			this.$emit('click', item);
		},

		formatCreateTime(time) {
			if (time == null || time === '') {
				return null;
			}
			let str = time.replace(/-/g,'/');
			let date = new Date(str);
			return formatDate(date, 'MM月dd日');
		},
		
		formatDistance(distance){
			if(distance){
				let a=parseFloat(distance);
				if(a>0){
					return distance.toFixed(2)+"km"
				}else{
					return a * 1000 +"m";
				}
			}
			return '0km';
		},
	}
};
</script>

<style lang="scss">
.m-position {
	.item {
		background-color: $bgcolor_white;
		padding: 34rpx 34rpx 40rpx;
		margin-bottom: 20rpx;
    border-radius: 10rpx;
    .class-cont{
      display: flex;
      margin-top: 20rpx;
      text{
        display: block;
        background: #F3F5FA;
        border-radius: 10rpx;
        padding:10rpx 14rpx;
        color: #4B9BFF;
        font-size: 24rpx;
        margin-right: 15rpx;
      }
    }
    .post-box{
      .post-item{
        margin-top: 42rpx;
      }
      .name{
        color: #333;
        font-size: 32rpx;
      }
      .right {
        color: $main-color;
        font-weight: 600;
        font-size: 36rpx;
        text-align: right;
      }
      .descr{
         display: flex;
         align-items: center;
         margin-top: 30rpx;
         text{
           margin-right: 30rpx;
           color: #888888;
           font-size: 24rpx;
         }
         .skill{
           background: #F3F5FA;
           border-radius: 10rpx;
           padding: 10rpx 15rpx;
         }
      }
    }
	}
}
.space-between {
	display: flex;
	justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.flex{
  display: flex;
}
.company-cont{
  .logo{
    width: 88rpx;
    height: 88rpx;
    border-radius: 10rpx;
    margin-right: 22rpx;
  }
  .company-name{
    font-size: 28rpx;
    color: #222;
    .title-name{
      font-size: 36rpx;
      color: #111;
    }
  }
  .right-arrow{
    width: 36rpx;
    height: 36rpx;
  }
}
.btn{
  border:1px solid #4397FF;
  color: #4397FF;
  font-size: 32rpx;
  text-align: center;
  border-radius: 40rpx;
  line-height: 78rpx;
  width: 526rpx;
  margin: 50rpx auto 0;
}
</style>
